<template>
    <el-dialog v-loading="loading" title="项目权限管理" :visible.sync="is_edit_project_auth" :before-close="handleClose" width="65%">
        <div>
            <el-select v-model="sys_id" @select="getAuth">
                <el-option v-for="item in sys_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <el-button type="primary" class="save-project-auth" size="middle" @click="save">保存</el-button>
        </div>

        <div v-if="auth_list" class="auth-list">
            <div class="check-auth-list clear-float" v-for="(item, index) in auth_list.auth" :key="index">
                <div class="auth-manage-img-block">
                    <img :src="item.logo" alt="logo">
                </div>
                <div class="auth-manage-checkbox">
                    <el-tree node-key="id" show-checkbox :default-expanded-keys="check_list" :default-checked-keys="check_list" ref="tree" :data="item.children" :props="props"></el-tree>
                </div>
            </div>
        </div>

    </el-dialog>
</template>

<script>
import { getSys } from "@/api/auth_manage";
import { getProjectAuth, saveProjectAuth } from "@/api/project_auth.js";

export default {
    name: "dialog",
    props: ["project_id", "is_edit_project_auth"],
    data() {
        return {
            sys_list: undefined,
            sys_id: undefined,
            loading: true,
            auth_list: undefined,
            check_list: undefined,
            props: {
                label: 'label',
                children: 'children',
                value: 'id'
            }
        };
    },
    methods: {
        handleClose() {
            this.$emit("update:is_edit_project_auth", false);
        },
        getAuth() {
            this.loading = true;
            console.log(this.loading)
            getProjectAuth({ projectId: this.project_id, sys: this.sys_id }).then(res => {
                this.auth_list = res;
                this.check_list = res.checks;
                this.loading = false;
            }).catch(err => {
                this.$message.error(err);
                this.loading = false;
            })
        },
        save() {
            let arr = [];
            this.auth_list.auth.forEach((el, index) => {
                let str = 'tree';
                arr = arr.concat(this.$refs[str][index].getCheckedKeys());
            });
            saveProjectAuth({ projectId: this.project_id, sys: this.sys_id, authIds: arr }).then(res => {
                this.$message({
                    message: '编辑成功!',
                    type: 'success'
                });
            }).catch(err => {
                this.$message.error(err);
            });
            this.handleClose();
        }
    },
    mounted() {
        getSys()
            .then(res => {
                this.sys_list = res;
                if (this.sys_list) {
                    this.sys_id = this.sys_list[0].id;
                }
            })
            .catch(err => {
                this.$message.error(err);
            });
    },
    watch: {
        is_edit_project_auth(newVal) {
            if (newVal) {
                this.loading = true;
                this.getAuth();
            }
        }
    }
};
</script>

<style scoped>
.save-project-auth {
    float: right;
}
.auth-list {
    height: 600px;
    margin-top: 20px;
    overflow: auto;
}
.check-auth-list {
    border: 1px solid #ccc;
    width: 48%;
    height: 300px;
    margin-left: 1%;
    display: inline-block;
    margin-top: 30px;
    vertical-align: top;
    overflow: hidden;
}
.auth-manage-img-block,
.auth-manage-checkbox {
    vertical-align: top;
    display: inline-block;
}
.auth-manage-img-block {
    width: 150px;
}
.auth-manage-checkbox {
    height: 100%;
    overflow-y: auto;
    width: calc(100% - 155px);
}
.auth-manage-img-block > img {
    width: 100%;
}
</style>
